@import (reference) "./../../UI/components/common.less";

.autocompletion {
    /* Promote to a layer, to improve paint performance when autocomplete is open */
    .layer;

    width: 600px;
    overflow: hidden;
    animation-name: appear;
    animation-duration: 0.1s;

    .entry {
        &.selected {
            transform: translateY(0.1px);
            box-shadow: 0 1px 8px 1px rgba(0, 0, 0, 0.2), 0 1px 20px 0 rgba(0, 0, 0, 0.19);

            .main {
                opacity: 1;
            }

            .detail {
                visibility: visible;
            }
        }

        .main {
            transition: opacity 1s;
            opacity: 0.8;
            display: flex;
            flex-direction: row;
            align-items: center;

            .icon {
                padding: 4px;
                width: 1.2em;
                flex: 0 0 auto;
                text-align: center;

                i {
                    font-size: 0.9em;
                }
            }
        }

        .label {
            flex: 1 0 auto;
            min-width: 100px;
            margin-left: 8px;
        }

        .detail {
            flex: 0 1 auto;
            min-width: 50px;
            text-align: right;

            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            margin: 0 5px 0 16px;

            font-size: 0.8em;
            opacity: 0.8;
            visibility: hidden;
        }
    }

    .documentation {
        .box-shadow-inset;
        padding: 8px;
        font-size: 0.8em;
        max-height: 48px;
        overflow-y: auto;
    }
}

@keyframes appear {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
